
interface Image {
    id: string,
    url: string
}
// 聚合处理类
const ClusterLayerManagers = {
    // 加载聚合图标
    loadClusterImages: function (map: any, imageList: Image[]) {
        imageList.forEach((item: Image) => {
            map.loadImage(item.url, (error: any, image: any) => {
                if (error) throw error;
                map.addImage(item.id, image);
            });
        })
    },
    // 加载聚合源
    loadClusterSource: function (map: any, sourceName: string, data: any) {
        // let geojson = {
        //     type: "FeatureCollection",
        //     features: data,
        // };

        // for (let i = 0; i < 100; i++) {
        //     geojson.features.push({
        //         type: "Feature",
        //         properties: {
        //             type: 1 + Math.floor(Math.random() * 5),
        //             label: "测试" + i
        //         },
        //         geometry: {
        //             type: "Point",
        //             coordinates: [110 + Math.random() * 10, 30 + Math.random() * 10],
        //         },
        //     });
        // }
        // 避免重复添加 资源
        if (!map.getSource(sourceName)) {
            map.on("load", function () {
                // 添加source
                map.addSource(sourceName+"_source", {
                    type: "geojson",
                    data,
                    cluster: true,
                    clusterRadius: 30,
                    clusterMaxZoom: 15,  // 在第14级缩放时显示单个标记
                });
                ClusterLayerManagers.loadClusterLayer(map, sourceName+"_layer", sourceName+"_source")
            })

        }
    },
    // 加载聚合图层
    loadClusterLayer: function (map: any, layerName: string, sourceName: string) {
        // 避免重复添加 图层
        if (!map.getLayer(layerName)) {
            // 添加聚合层
            map.addLayer({
                id: layerName,
                type: "symbol",
                source: sourceName,
                layout: {
                    "icon-size": ["case", ["has", "point_count"], 0.2, 0.1], // 聚合点图标大小
                    "icon-image": [
                        "case",
                        ["has", "point_count"],  // 条件1
                        "position",              // 结果1
                        ["get", "defaultIcon"]
                    ], // 聚合点图标
                    "text-field": ["get", "point_count_abbreviated"], // 聚合点数量
                    "text-font": ["MicrosoftYaHei"],// 聚合点字体
                    "text-offset": [0.5, -0.1],// 聚合点数量偏移
                    "text-size": 20,// 聚合点数量大小
                    "icon-ignore-placement": true, // 聚合点图标忽略覆盖
                },
                paint: {
                    "text-color": "#F0F0F0", // 文字颜色
                    "text-halo-width": 300, // 背景宽度
                    "text-halo-color": "rgba(0, 0, 0, 0.5)", // 背景颜色（黑色）
                    "text-halo-blur": 0.5, // 背景模糊
                },
            })

            // 添加实际的点（显示真实标记和图片）
            map.addLayer({
                id: layerName + "_point",
                type: "symbol",
                source: sourceName,
                filter: ["!has", "point_count"],  // 过滤聚合点，显示真实的标记
                layout: {
                    "icon-image": "defaultIcon",  // 使用自定义图标
                    "icon-size": 0.2,  // 图标大小
                    "text-field": "{label}",  // 显示名称或其他字段
                    "text-font": ["MicrosoftYaHei"],
                    "text-size": 14,
                    "text-offset": [0.5, 2],
                },
            });
        }
    },
    // 删除聚合图层
    removeClusterLayer: function (map: any, layerName: string) {
        if (map.getLayer(layerName+"_layer")) {
            map.removeLayer(layerName+"_layer")
            map.removeLayer(layerName+"_layer_point")
        }
    },
    // 删除聚合源
    removeClusterSource: function (map: any, sourceName: string) {
        if (map.getSource(sourceName+"_source")) {
            map.removeSource(sourceName+"_source")
            map.removeImage("defaultIcon")
            map.removeImage("position") 
        }
    }

}

export { ClusterLayerManagers }

